
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车-聚码网-站长交易平台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="./public/static/index/bui/bui.css">
		<script src="./public/static/index/bui/zepto.js"></script>
		<script src="./public/static/index/bui/bui.js"></script>
		<link rel="icon" href="./public/favicon.ico">
		<!-- 添加图标字体支持 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<!-- 聊天在线状态管理 -->
		<script src="./public/static/index/js/chat-status.js"></script>
		<style>
            /* 图标字体样式 */
            .icon-home:before {
                content: "\f015";
                font-family: FontAwesome;
            }
            .icon-shoppingcart:before {
                content: "\f07a";
                font-family: FontAwesome;
            }
            .icon-edit:before {
                content: "\f044";
                font-family: FontAwesome;
            }
            .icon-list:before {
                content: "\f03a";
                font-family: FontAwesome;
            }
            /* 确保图标显示 */
            [class^="icon-"], [class*=" icon-"] {
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                display: inline-block;
                text-decoration: inherit;
            }
            body {
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }
            main {
                flex: 1;
                overflow: scroll;
                height: calc(100vh - 100px); /* 减去底部导航的高度 */
                background-color: #fff;
            }
            footer {
                background-color: #fff;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 1000;
            }
            .bui-list-pic .bui-pic img, .bui-list-photo .bui-thumbnail img {
                width: 100%;
                height: 175px;
            }
            hr {
                background: #f3f5f8;
                border: 0;
                padding: 0;
                margin: 0;
                display: block;
                height: 1px;
                width: 100%;
            }
            .bui-nav>.active {
    color: #f9342a;
    background: #fff;
}
        </style>
	</head>
	<body>
        
<div class="bui-page">
 <!--   <header class="bui-bar" style="background-color: #fff;">-->
	<!--	<div class="bui-bar-left" >-->
	<!--		<a class="bui-btn btn-back" onclick="bui.back();"><i class="icon-back" style="color: #000;"></i></a>-->
	<!--	</div>-->
	<!--	<div class="bui-bar-main"></div>-->
	<!--	<div class="bui-bar-right">-->
			
	<!--	</div>-->
	<!--</header>-->
	<main>
        <div id="selectCustom">
            <div style="text-align: center;margin-top: 100px;">
                <img src="./public/static/index/images/noCart.png">
                <p> <font style="font-size: 20px;color: #b3b3b3">购物车空空如也</font></p>
            </div>
        </div>
    </main>
	<footer>
		<ul id="" class="bui-nav">
            <li id="" class="bui-btn bui-box-vertical active" style="text-align: left;">
                <font style="color: #fb0247;font-weight: bolder;text-align: center;font-size: 18px;">￥<font id="priceAll">0</font></font>
            </li>
            <li id="" class="bui-btn bui-box-vertical">
                <div id="delShopCart" class="bui-btn" style="background-color:#ffc7da!important;color: #f31818;margin-top: -3px;">删除</div>
            </li>
            <li class="bui-btn bui-box-vertical">
                <div id="buyGoodsGo" class="bui-btn" style="background-color:#ff0057!important;color: #fff; margin-right: 10px;margin-top: -3px;">结算</div>
            </li>
        </ul>
        <ul id="tabFootNav" class="bui-nav">
            <li id="homeGo" class="bui-btn bui-box-vertical">
                <a href="./index.html" style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;">
                    <i class="icon-home"></i>
                    <div class="span1">首页</div>
                </a>
            </li>
            <li id="classifyGo" class="bui-btn bui-box-vertical">
                <a href="./clsssify.html" style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;">
                    <i class="icon-list"></i>
                    <div class="span1">分类</div>
                </a>
            </li>
            <li id="shopCartGo" class="bui-btn bui-box-vertical">
                <a href="./shopCart.html" style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;">
                    <i class="icon-shoppingcart"></i>
                    <div class="span1">购物车</div>
                </a>
            </li>
            <li id="orderQueryGo" class="bui-btn bui-box-vertical">
                <a href="./orderQuery.html" style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit;">
                    <i class="icon-edit"></i>
                    <div class="span1">订单</div>
                </a>
            </li>
            <!-- <li id="kflinksGo" class="bui-btn bui-box-vertical"><i class="icon-chat"></i>
                <div class="span1">客服</div>
            </li> -->
        </ul>
	</footer>
</div>


<script>
// API地址
var API_BASE_URL = "https://api.sc123.shop/";

// 设置聊天状态管理的API地址
if (window.ChatStatus) {
    window.ChatStatus.setApiBaseUrl(API_BASE_URL);
}

var sortClick;
var searchGoods;
bui.ready(function(){

    var uiSlide = bui.slide({
        id:"#slide",
        height:450,
        autoplay:true,
        autopage:true,
        //autoheight:true,
        zoom:true
    })

    $("#homeGo").on("click",function(e){
        bui.load({ url: "/index/index/index"});
    })
    $("#classifyGo").on("click",function(e){
        bui.load({ url: "/index/index/classify"});
    })
    $("#shopCartGo").on("click",function(e){
        bui.load({ url: "/index/index/shopCart"});
    })
    $("#orderQueryGo").on("click",function(e){
        bui.load({ url: "/index/index/orderQuery"});
    })
    $("#kflinksGo").on("click",function(e){
        var kflink = "https://plan.auth.sishuge.cn/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1	";
        if(kflink){
            bui.load({ url: "/index/index/kflinks"});
        }else{
            bui.alert("当前客服坐席无人值班");
        }
    });

    var storage = bui.storage(0);
    var shopCartArr = []
    if(storage.get("shopCart")){
        shopCartArr = storage.get("shopCart");
    }
    var gidArr = [];
    shopCartArr.forEach(function(el, index) {
       gidArr.push(el.gid);
    });


    //获取购物车商品信息
   getShopCartGoods();
   function getShopCartGoods(){
        $.ajax({
            url: "/index/index/getShopCartGoods",
            data: {
                gid:JSON.stringify(gidArr)
            },
            type: "post",
            dataType: "json",
            success: function(data){
                var selectData = [];
                data.data.forEach(function(el, index) {
                    selectData.push({"name":'<font style="font-weight: bolder">'+el.name+'</font><br><font style="color: #fb0247;">￥'+el.price+'</font>',"image":el.cover,"value":el.gid})
                })
                   //动态绑定
                var uiSelectCustom = bui.select({
                    id: "#selectCustom",
                    popup: false,
                    type: "checkbox",
                    direction: "right",
                    data: selectData,
                    onChange: function(e) {
                        priceAll(uiSelectCustom.value(),data.data);
                    }
                })

                $("#delShopCart").on("click",function(e){
                    var gid = uiSelectCustom.value();
                    gid = gid.split(",");
                    if(gid[0] !== ""){
                        for(i=0;i<gid.length;i++){
                            $('input[value="'+gid[i]+'"]').parent().remove();
                            storage.remove("shopCart",gid[i].toString(),"gid");
                            $("#priceAll").text(0);
                            bui.hint({ content: "<i class='icon-check'></i><br />删除成功", position: "center", effect: "fadeInDown" });
                        }
                    }else{
                        bui.hint({ content: "<i class='icon-error'></i><br />请选择商品", position: "center", effect: "fadeInDown" });
                    }
                })

                $("#buyGoodsGo").on("click",function(e){
                    var gid = uiSelectCustom.value();
                    gid = gid.split(",");
                    if(gid[0] !== ""){
                        bui.load({ url: "/index/index/buyGoods",param: {gid:JSON.stringify(gid)}});
                    }else{
                        bui.hint({ content: "<i class='icon-error'></i><br />请选择商品", position: "center", effect: "fadeInDown" });
                    }
                })
            },
            error: function(data){
            }
        });
    }

    function priceAll(gid,data){
        var price = 0;
        var gid =  gid.split(",");
        data.forEach(function(el,index){
            for(i=0;i<=gid.length;i++){
                if(gid[i] == el.gid){
                   price = parseFloat(price)+parseFloat(el.price);
                }
            }
        })
        $("#priceAll").text(price.toFixed(2));
    }



})
</script>
</body>
</html>